<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      li {
        list-style: none;
      }
      .banner {
        width: 784px;
        height: 100%;
        /* background-color: yellow; */
        margin: 0 auto;
        overflow: hidden;
      }

      .bg1 {
        width: 100%;
        height: 450px;
        object-fit: fill;
        margin: 10px 0 20px 0;
      }

      .list {
        float: left;
        width: 370px;
        height: 330px;
        /* background-color: aqua; */
        margin: 0 10px 10px 10px;
        overflow: hidden;
      }
      .pic {
        width: 85%;
        height: 80%;
        display: block;
        margin: 0 auto;
      }
      .title {
        width: 85%;
        margin: 10px auto;
        /* background-color: antiquewhite; */
      }
      .btn {
        width: 120px;
        height: 40px;
        border: 1px solid black;
        overflow: hidden;
        margin: 10px auto;
        line-height: 40px;
        text-align: center;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <div class="banner">
      <h3>Bengbu Aote Biotechnology Co., Ltd.</h3>
      <!-- part1 -->
      <div>
        <img src="./img/bg1.png" alt="" srcset="" class="bg1" />
        <ul>
          <li class="list">
            <img src="./img/l1.png" alt="" class="pic" />
            <h5 class="title">
              Portable Outdoor Camping Adventure Survival Tools Waterproof First
              Aid
            </h5>
          </li>
          <li class="list">
            <img src="./img/l2.png" alt="" class="pic" />
            <h5 class="title">
              It Can Be Used For Keeping Temperature And Rewarming Of The
              Wounded To The Open Country
            </h5>
          </li>
          <li class="list">
            <img src="./img/l3.png" alt="" class="pic" />
            <h5 class="title">Automatic External Defibrillator</h5>
          </li>
          <li class="list">
            <img src="./img/l4.png" alt="" class="pic" />
            <h5 class="title">Medical Emergency Rescue Stretcher</h5>
          </li>
          <li class="list">
            <img src="./img/l5.png" alt="" class="pic" />
            <h5 class="title">Emergency lamp</h5>
          </li>
          <li class="list">
            <img src="./img/l6.png" alt="" class="pic" />
            <h5 class="title">
              Absorbable Soluble Hemostatic Material & Medical gauze dressing
            </h5>
          </li>
        </ul>
        <div class="btn">See More</div>
      </div>
      <!-- part2 -->
      <div style="margin-top: 30px">
        <img src="./img/bg2.png" alt="" srcset="" class="bg1" />
        <ul>
          <li class="list">
            <img src="./img/l7.png" alt="" class="pic" />
            <h5 class="title">Dynamic Electrocardiograph</h5>
          </li>
          <li class="list">
            <img src="./img/l8.png" alt="" class="pic" />
            <h5 class="title">Oxygen pimp</h5>
          </li>
          <li class="list">
            <img src="./img/l9.png" alt="" class="pic" />
            <h5 class="title">Disposable Surgical Gowns</h5>
          </li>
          <li class="list">
            <img src="./img/l10.png" alt="" class="pic" />
            <h5 class="title">Disposable Medical Syringe</h5>
          </li>
          <li class="list">
            <img src="./img/l11.png" alt="" class="pic" />
            <h5 class="title">
              Nitrile Gloves Are 100% Synthetic Latex And Are Not Allergic To
              Humans.
            </h5>
          </li>
          <li class="list">
            <img src="./img/l12.png" alt="" class="pic" />
            <h5 class="title">Crutches</h5>
          </li>
        </ul>
        <div class="btn">See More</div>
      </div>
      <!-- part3 -->
      <div style="margin-top: 30px">
        <img src="./img/bg3.png" alt="" srcset="" class="bg1" />
        <ul>
          <li class="list">
            <img src="./img/l13.png" alt="" class="pic" />
            <h5 class="title">DSodium cyanide</h5>
          </li>
          <li class="list">
            <img src="./img/l14.png" alt="" class="pic" />
            <h5 class="title">Industrial gelatin</h5>
          </li>
          <li class="list">
            <img src="./img/l15.png" alt="" class="pic" />
            <h5 class="title">Bone Glue</h5>
          </li>
          <li class="list">
            <img src="./img/l16.png" alt="" class="pic" />
            <h5 class="title">DBone Char And Bone Powder</h5>
          </li>
          <li class="list">
            <img src="./img/l17.png" alt="" class="pic" />
            <h5 class="title">Ammonium Sulphate</h5>
          </li>
          <li class="list">
            <img src="./img/l18.png" alt="" class="pic" />
            <h5 class="title">Purified Terephthalic Acid</h5>
          </li>
        </ul>
        <div class="btn">See More</div>
      </div>
    </div>
  </body>
</html>
